import React from "react";
import { withRouter } from "react-router-dom";
import { inject, observer } from "mobx-react";
import { message } from "antd";
import { toJS } from "mobx";

const HOCAddDeliveryArea = (WrapComponent) => {
  @withRouter
  @inject("setStoreInfo")
  @observer
  class ElementComponent extends React.Component {
    state = {
      options: [
        {
          label: "中国",
          value: 0,
          attr: "country",
          isLeaf: false,
        },
      ],
      checkBoxOptions: [],
    };

    componentDidMount() {
      //添加-初始化表单
      let { setStore } = this.props.setStoreInfo;
      if (Object.keys(toJS(setStore)).length > 0) {
        this.modifyInit(toJS(setStore));
      } else {
        this.initFormData();
      }
    }

    //添加-初始化表单
    initFormData = () => {
      let obj = {
        dasNoda: "",
        dasCcm: 0,
        dasFc: "",
        dasRc: "",
        dasFq: "",
        storeArea: null,
        das: null,
      };
      let { formOne } = this.refs.form.refs;
      formOne.setFieldsValue(obj);
    };
    //修改-初始化
    modifyInit = async (allData) => {
      let { countyData } = allData;
      let quXian = [];
      countyData.forEach((element, index) => {
        let obj = {
          label: element.countyName,
          value: element.countyId,
          attr: "city",
          isLeaf: true,
          index,
        };
        quXian.push(obj);
      });
      let obj = this.state;
      obj.checkBoxOptions = quXian;
      await this.setState(obj);
      let { formOne } = this.refs.form.refs;
      formOne.setFieldsValue(allData);
    };

    //加载地区
    handleLoadData = (selectedOptions) => {
      if (selectedOptions[selectedOptions.length - 1].attr === "country") {
        this.getProvince();
      } else if (
        selectedOptions[selectedOptions.length - 1].attr === "province"
      ) {
        this.getCity(
          selectedOptions[selectedOptions.length - 1].index,
          selectedOptions[selectedOptions.length - 1].value
        );
      }
    };
    //onChange获取市
    handleChange = (value, selectedOptions) => {
      if (selectedOptions.length === 3) {
        let id = selectedOptions[selectedOptions.length - 1].value;
        this.getQu(id);
      }
    };

    //获取省份
    getProvince = () => {
      let { getSetProvence } = this.props.setStoreInfo;
      getSetProvence().then((data) => {
        if (data.data.code === 200) {
          let allData = data.data.data;
          let provinceData = [];
          allData.forEach((element, index) => {
            let obj = {
              label: element.provinceName,
              value: element.provinceId,
              attr: "province",
              isLeaf: false,
              index,
            };
            provinceData.push(obj);
          });
          let obj = this.state;
          obj.options[0].children = provinceData;
          this.setState(obj);
        } else {
          message.error("请求省份信息失败");
        }
      });
    };
    //获取市
    getCity = (index, provinceId) => {
      let { getSetCities } = this.props.setStoreInfo;
      getSetCities(provinceId).then((data) => {
        if (data.data.code === 200) {
          let allData = data.data.data;
          let cities = [];
          allData.forEach((element, index) => {
            let obj = {
              label: element.cityName,
              value: element.cityId,
            };
            cities.push(obj);
          });
          let obj = this.state;
          obj.options[0].children[index].children = cities;
          this.setState(obj);
        } else {
          message.error("请求城市信息失败");
        }
      });
    };
    //获取区县
    getQu = (cityId) => {
      let { getArea } = this.props.setStoreInfo;
      getArea(cityId).then((data) => {
        if (data.data.code === 200) {
          let allData = data.data.data;
          let quXian = [];
          allData.forEach((element) => {
            let obj = {
              label: element.countyName,
              value: element.countyId,
            };
            quXian.push(obj);
          });
          let obj = this.state;
          obj.checkBoxOptions = quXian;
          this.setState(obj);
        } else {
          message.error("请求区县信息失败");
        }
      });
    };

    //确定添加
    sureAddBtn = () => {
      let { setStore } = this.props.setStoreInfo;
      if (Object.keys(toJS(setStore)).length > 0) {
        this.modifyBtn();
      } else {
        this.addFn();
      }
    };

    //添加
    addFn = () => {
      let key = [
        "dasNoda",
        "dasCcm",
        "dasFc",
        "dasRc",
        "dasFq",
        "storeArea",
        "das",
      ];
      let { formOne } = this.refs.form.refs;
      let formData = formOne.getFieldsValue(key);
      let { addArea } = this.props.setStoreInfo;
      let { dasNoda, storeArea, das, dasCcm, dasFc, dasRc, dasFq } = formData;
      let obj = {
        dasNoda,
        dasCcm,
        dasFc,
        dasRc,
        dasFq,
        dasIk: "111",
      };
      let countyList = [];
      let checkBoxOptions = this.state.checkBoxOptions;
      for (let i = 0; i < das.length; i++) {
        for (let j = 0; j < checkBoxOptions.length; j++) {
          if (checkBoxOptions[j].value === das[i]) {
            let obj = {
              countyId: das[i],
              countyName: checkBoxOptions[j].label,
            };
            countyList.push(obj);
          }
        }
      }
      
      obj.countyList = countyList;

      addArea(obj).then((data) => {
        if (data.data.code === 200) {
          message.success("添加成功");
        } else {
          message.error("添加区域失败");
        }
      });
    };
    //修改
    modifyBtn = () => {
      let key = [
        "dasNoda",
        "dasCcm",
        "dasFc",
        "dasRc",
        "dasFq",
        "das",
        "dasId",
      ];
      let { formOne } = this.refs.form.refs;
      let formData = formOne.getFieldsValue(key);
      let { dasNoda, dasId, das, dasCcm, dasFc, dasRc, dasFq } = formData;
      let obj = {
        dasId,
        dasNoda,
        dasCcm,
        dasFc,
        dasRc,
        dasFq,
        dasIk: "111",
      };
      let countyList = [];
      let checkBoxOptions = this.state.checkBoxOptions;
      for (let i = 0; i < das.length; i++) {
        for (let j = 0; j < checkBoxOptions.length; j++) {
          if (checkBoxOptions[j].value === das[i]) {
            let obj = {
              countyId: das[i],
              countyName: checkBoxOptions[j].label,
            };
            countyList.push(obj);
          }
        }
      }
      obj.countyList = countyList;
      let { modifyArea } = this.props.setStoreInfo;
      modifyArea(obj).then((data) => {
        if (data.data.code === 200) {
          message.success("修改成功");
        } else {
          message.error("修改失败");
        }
      });
    };

    //返回上级
    returnBtn = () => {
      this.props.history.push("/Home/SheZhi/SetDeliveryArea/ListDeliveryArea");
    };
    render() {
      let methods = {
        returnBtn: this.returnBtn,
        handleLoadData: this.handleLoadData,
        handleChange: this.handleChange,
        sureAddBtn: this.sureAddBtn,
      };
      return (
        <div>
          <WrapComponent
            ref="form"
            {...this.state}
            {...methods}
          ></WrapComponent>
        </div>
      );
    }
  }
  return ElementComponent;
};

export default HOCAddDeliveryArea;
